<template>
  <div class="nav-main">
    <ul>
      <li
        v-for="item in navList"
        :key="item.id"
        @click="changeTab(item)"
      >
        <span :class="item.id == index ? 'active' : ''">{{ item.title }}</span>
        <div class="nav-updown" v-if="item.icon == 'updown'">
          <img
            :src="`./images/up${
              item.id == index && orderBy == 'asc' ? '-active' : ''
            }.png`"
            alt=""
          />
          <img
            :src="`./images/down${
              item.id == index && orderBy == 'desc' ? '-active' : ''
            }.png`"
            alt=""
          />
        </div>
        <div class="nav-updown" v-if="item.icon == 'down'">
          <img
            :src="`./images/down${item.id == index ? '-active' : ''}.png`"
            alt=""
          />
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "Nav",
  data() {
    return {
      index: 1,
      orderBy: "asc",
      navList: [
        {
          id: 1,
          title: "综合",
          icon: "down",
          isdrop: true,
        },
        {
          id: 2,
          title: "销量",
          sortKey: 'num',
        },
        {
          id: 3,
          title: "价格",
          icon: "updown",
          sortKey: 'price',
        },
        {
          id: 4,
          title: "筛选",
          ispop: true,
        },
      ],
    };
  },
  methods: {
    changeTab(item) {
      let {id, icon} = item;
      if (icon == "updown") {
        if (id == this.index) {
            this.orderBy = this.orderBy == "asc" ? "desc" : "asc";
        } else {
            this.orderBy = 'asc';
        }        
      }
      this.index = id;
      this.$emit('changeTab', item.sortKey, this.orderBy);
    },
  },
};
</script>

<style lang="scss" scoped>
.nav-main {
  background-color: #fff;
  font-size: 0.48rem;
  height: 1.2rem;
  line-height: 1.2rem;

  ul {
    display: flex;
    justify-content: space-around;

    li {
      display: flex;
      align-items: center;

      .nav-updown {
        display: flex;
        flex-direction: column;
        width: 0.2667rem;
        margin-left: 0.1333rem;
      }
    }
  }
  .active {
    color: #95111c;
  }
}
</style>